<template>
  <div class="_wrapper">
    <div class="_abs-c" v-if="list.length === 0">
      <el-empty description="暂无数据" />
    </div>
    <div
      v-else
      v-infinite-scroll="load"
      class="_flex _flex-wrap _wrapper _p20"
      style="overflow: auto"
    >
      <div
        class="_cart _p10 _m-t-10"
        style="width: 48%"
        v-for="item in list"
        :key="item.id"
      >
        <div class="_wrapper-x">
          <ComImg :value="item.link_url" />
        </div>
        <div class="_font">{{ item.created_date }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import ComImg from "@/components/com-img/com-img.vue";
import ljApi from "@/api/lj-api";

export default {
  components: {
    ComImg,
  },
  data() {
    return {
      list: [],
      pageInfo: {
        pageNo: 1,
        pageSize: 20,
      },
      isLoad: true,
      point_code: "15136761839",
    };
  },
  mounted() {
    this.point_code = this.$route.query.point_code || "15136761839";
    this.init();
  },
  methods: {
    build_vision_url(url) {
      // http://http.zzfmhb.com:12080/file/20240104/15136761839-081cb2afe10645c5b21947ec53fc101a-20240104111624-WaterGarbage-image.jp
      return `https://lj.zzfmhb.com:12081/file/${url
        .split("-")[2]
        .slice(0, 8)}/${url}`;
    },
    async init() {
      this.isLoad = true;
      let res = await ljApi.vision_page({
        ...this.pageInfo,
        rules: { point_code__eq: this.point_code, link_url__not_null: true },
        sorts: [{ field: "created_date", direction: "DESC" }],
      });
      res.records.forEach((item) => {
        item.link_url = this.build_vision_url(item.file_name);
      });
      if (this.pageInfo.pageNo == 1) {
        this.list = res.records;
      } else {
        this.list = [...this.list, ...res.records];
      }
      if (res.records.length > 0) {
        this.isLoad = false;
      }
    },
    async load() {
      console.log(this.pageInfo.pageNo);
      if (this.isLoad) {
        return;
      }
      await this.init();
      this.pageInfo.pageNo++;
    },
  },
};
</script>
<style scoped></style>
